import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:jet_rails/jr_app/jr_models/jr_comment_model.dart';
import 'package:jet_rails/jr_utils/jr_audio.dart';

class JrCommentWidget extends StatefulWidget {
  const JrCommentWidget({Key? key, required this.commentModel, this.content, this.action}) : super(key: key);
  final JrCommentModel commentModel;
  final Widget? content;
  final Widget? action;
  @override
  State<JrCommentWidget> createState() => _JrCommentWidgetState();
}

class _JrCommentWidgetState extends State<JrCommentWidget> {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(16.h),
      margin: EdgeInsets.only(top: 10.h, bottom: 10.h),
      decoration: BoxDecoration(
        color: const Color(0xFFA46EFF),
        borderRadius: BorderRadius.circular(12.r),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            children: [
              CircleAvatar(
                radius: 20.w,
                backgroundImage: NetworkImage(widget.commentModel.avatar ?? ''),
              ),
              SizedBox(
                width: 10.w,
              ),
              Expanded(
                child: Text(
                  widget.commentModel.nickname ?? '',
                  style: const TextStyle(color: Colors.white),
                ),
              ),
              widget.action ?? Container(),
            ],
          ),
          widget.content ??
              (widget.commentModel.voicePath != null
                  ? buildVoiceContent(widget.commentModel)
                  : buildTextContent(widget.commentModel))
        ],
      ),
    );
  }

  Widget buildTextContent(JrCommentModel comment) {
    return Container(
        margin: EdgeInsets.only(top: 12.h),
        alignment: Alignment.centerLeft,
        child: Text(comment.content ?? '', style: const TextStyle(color: Colors.white)));
  }

  bool playing = false;
  playOrStop(String path) async {
    if (!playing) {
      await JrAudio.instance.play(path);
      playing = true;
    } else {
      await JrAudio.instance.stop();
      playing = false;
    }
    setState(() {});
  }

  Widget buildVoiceContent(JrCommentModel comment) {
    return GestureDetector(
      onTap: () {
        playOrStop(comment.voicePath!);
      },
      child: Container(
        height: 28.h,
        width: 80.w,
        margin: EdgeInsets.only(top: 10.h),
        decoration: BoxDecoration(
          color: const Color(0xFFB8FE50),
          borderRadius: BorderRadius.circular(15.r),
        ),
        child: Center(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Image.asset(
                'assets/webp/icon_voice_content.webp',
                color: Colors.black,
                height: 16.sp,
              ),
              SizedBox(width: 8.w),
              Text(
                comment.voiceDuration != null ? '${comment.voiceDuration}s' : '',
                style: TextStyle(color: Colors.black, fontSize: 16.sp),
              )
            ],
          ),
        ),
      ),
    );
  }
}
